<template>
<div>
  <div class="table-data" v-show="tabShow">
    <div class="search-box">
      <el-input size="small" v-model="name" placeholder="渠道名称"></el-input>
      <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
    </div>
    <el-table 
      v-loading="loading"
      element-loading-text="正在加载"
      element-loading-spinner="el-icon-loading" :data="tableData"  style="width:100%" :height="tHeight" class="table-box">
      <el-table-column label="序号" prop="id" width="80"></el-table-column>
      <el-table-column label="渠道名" prop="name" width="180"></el-table-column>
      <el-table-column label="联系人" prop="link_name"></el-table-column>
      <el-table-column label="联系电话" prop="phone"></el-table-column>
      <el-table-column label="可用储值" prop="amount"></el-table-column>
      <el-table-column label="冻结储值" prop="frozen_price"></el-table-column>
      <el-table-column label="消费储值" prop="consume_price"></el-table-column>
      <el-table-column label="提现储值" prop="with_price"></el-table-column>
      <el-table-column label="总储值" prop="total_price"></el-table-column>
      <el-table-column label="创建时间" prop="create_time" width="200"></el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <router-link :to="{name:'storageDetail',query:{id:scope.row.id}}" @click.native="handleDetail()" class="link">明细</router-link>
          <i v-if="manage=='admin'">-</i>
          <button v-if="manage=='admin'" class="butt-min" @click="handleRecharge(1,scope.row)">提现</button>
          <i v-if="manage=='admin'">-</i>
          <button v-if="manage=='admin'" class="butt-min" @click="handleRecharge(2,scope.row)">充值</button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pages" ref="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,30,50]"
        :page-size="size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
  <router-view @loadData="loadData"></router-view>
  <EditDialog :isEdit="isEdit" :id="id" :amounts="amount" :isAdd="isAdd" :form="formData" @closeDialog="closeDialog" @loadData="loadData"></EditDialog>
</div>
</template>

<script lang="ts">
import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
import EditDialog from "./EditDialog.vue";
import storageApi from "@/api/storage";
// import { State, Getter, Mutation, Action } from "vuex-class";
@Component({
  components: {EditDialog }
})
export default class SecurityList extends Vue {
  // @Getter("user") getUser: any;
  @Provide() id:number = 0
  @Provide() amount:string = '0'
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() tableData: any = []; // 表格数据
  @Provide() multipleTable: any = []; // 表格数据
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() isAdd: Boolean = false; // 是否展示添加弹窗
  @Provide() isEdit: Boolean = false; // 是否展示编辑弹窗
  @Provide() dialogVisible: Boolean = false; // 是否展示编辑页面
  @Provide() tabShow: Boolean = true; // 是显示否列表页面
  @Provide() name: string = ''; // 搜索条件名称
  @Prop({}) tabVisible!: any;
  @Provide() state: boolean = true; // 黑白名单状态
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Provide() formData: any = {
    mch_id:"",
    type: "",
    amount: "",
    remark:""
  };
  @Provide() manage: any = '';//管理员
  @Watch("$route") handleRouteChange(to: any,form:any) {
    if(form.path!='/storageList'){
      this.tabShow=this.tabVisible;
    }
  }
  handleDetail(){
    this.tabShow=false
  }
  // 充值
  handleRecharge(i:any,row:any){

    this.formData.type=2
    this.isEdit=true
    this.formData.mch_id=row.id
    this.formData.amount=''
    this.formData.remark=''
    this.id = i
    if(i==1){
      this.isAdd=true
      this.amount = row.amount
      this.formData.type=1
    }
  }
  headClass() {
            return "text-align: center;background:#eef1f6;";
        }
  // 提现
  handleWithdraw(){}
  closeDialog() {
    this.isAdd=false
    this.isEdit=false
  }

  created() {
    this.loadData();
    if(this.$route.path!='/storageList'){
      this.tabShow=false
    }
    // 判断管理员权限
    let manage:any=localStorage.getItem('manage')
    this.manage=JSON.parse(manage).type
  }

  loadData() {
    storageApi.storageList(this.page,this.size,this.name)
    .then((res: any) => {
        this.tableData = res.data.data.data;
        this.total = res.data.data.total;
        this.loading=false
    })
  }

  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }
  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }
  handleSearch(): void {
    // 点击搜索
    this.page = 1;
    this.loadData();
  }
}
</script>

<style lang="scss" scoped>
.el-range-editor.el-input__inner{
  margin-right: 10px
}
</style>
